
<script type="text/html" data-template-name="csv">
    <div class="form-row">
        <label for="node-input-temp"><i class="fa fa-list"></i> <span data-i18n="csv.label.columns"></span></label>
        <input type="text" id="node-input-temp" data-i18n="[placeholder]csv.placeholder.columns">
    </div>
    <div class="form-row">
        <label for="node-input-select-sep"><i class="fa fa-text-width"></i> <span data-i18n="csv.label.separator"></span></label>
            <select style="width:150px" id="node-input-select-sep">
                <option value="," data-i18n="csv.separator.comma"></option>
                <option value="\t" data-i18n="csv.separator.tab"></option>
                <option value=" " data-i18n="csv.separator.space"></option>
                <option value=";" data-i18n="csv.separator.semicolon"></option>
                <option value=":" data-i18n="csv.separator.colon"></option>
                <option value="#" data-i18n="csv.separator.hashtag"></option>
                <option value="" data-i18n="csv.separator.other"></option>
           </select>
           <input style="width:40px;" type="text" id="node-input-sep" pattern=".">
    </div>
    <div class="form-row">
        <label><i class="fa fa-code"></i> <span data-i18n="csv.label.spec"></span></label>
        <div style="display: inline-grid;width: 70%;">
            <select style="width:100%" id="csv-option-spec">
                <option value="rfc" data-i18n="csv.spec.rfc"></option>
                <option value="" data-i18n="csv.spec.legacy"></option>
            </select>
            <div>
                <div class="form-tips csv-lecacy-warning" data-i18n="node-red:csv.spec.legacy_warning" 
                    style="width: calc(100% - 18px); margin-top: 4px; max-width: unset;">
                </div>
            </div>
        </div>
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
    </div>
    <hr align="middle"/>
    <div class="form-row">
        <label style="width:100%;"><span data-i18n="csv.label.c2o"></span></label>
    </div>
    <div class="form-row" style="padding-left:20px;">
        <label><i class="fa fa-sign-in"></i> <span data-i18n="csv.label.input"></span></label>
        <span data-i18n="csv.label.skip-s"></span>&nbsp;<input type="text" id="node-input-skip" style="width:40px; height:25px;"/>&nbsp;<span data-i18n="csv.label.skip-e"></span><br/>
        <label>&nbsp;</label>
        <input style="width:20px; vertical-align:baseline; margin-right:5px;" type="checkbox" id="node-input-hdrin"><label style="width:auto; margin-top:7px;" for="node-input-hdrin"><span data-i18n="csv.label.firstrow"></span></label><br/>
        <label>&nbsp;</label>
        <input style="width:20px; vertical-align:baseline; margin-right:5px;" type="checkbox" id="node-input-strings"><label style="width:auto; margin-top:7px;" for="node-input-strings"><span data-i18n="csv.label.usestrings"></span></label><br/>
        <label>&nbsp;</label>
        <input style="width:20px; vertical-align:baseline; margin-right:5px;" type="checkbox" id="node-input-include_empty_strings"><label style="width:auto; margin-top:7px;" for="node-input-include_empty_strings"><span data-i18n="csv.label.include_empty_strings"></span></label><br/>
        <label>&nbsp;</label>
        <input style="width:20px; vertical-align:baseline; margin-right:5px;" type="checkbox" id="node-input-include_null_values"><label style="width:auto; margin-top:7px;" for="node-input-include_null_values"><span data-i18n="csv.label.include_null_values"></span></label><br/>
    </div>
    <div class="form-row" style="padding-left:20px;">
        <label><i class="fa fa-sign-out"></i> <span data-i18n="csv.label.output"></span></label>
        <select type="text" id="node-input-multi" style="width:250px;">
            <option value="one" data-i18n="csv.output.row"></option>
            <option value="mult" data-i18n="csv.output.array"></option>
        </select>
    </div>
    <div class="form-row" style="margin-top:20px">
        <label style="width:100%;"><span data-i18n="csv.label.o2c"></span></label>
    </div>
    <div class="form-row" style="padding-left:20px;">
        <label><i class="fa fa-sign-out"></i> <span data-i18n="csv.label.output"></span></label>
        <!-- <input style="width:20px; vertical-align:top; margin-right:5px;" type="checkbox" id="node-input-hdrout"><label style="width:auto;" for="node-input-hdrout"><span data-i18n="csv.label.includerow"></span></span> -->
        <select style="width:60%" id="node-input-hdrout">
            <option value="none" data-i18n="csv.hdrout.none"></option>
            <option value="all" data-i18n="csv.hdrout.all"></option>
            <option value="once" data-i18n="csv.hdrout.once"></option>
        </select>
    </div>
    <div class="form-row" style="padding-left:20px;">
        <label></label>
        <label style="width:auto; margin-right:10px;" for="node-input-ret"><span data-i18n="csv.label.newline"></span></label>
        <select style="width:calc(70% - 108px);" id="node-input-ret">
            <option value='\r\n' data-i18n="csv.newline.windows"></option>
            <option value='\n' data-i18n="csv.newline.linux"></option>
            <option value='\r' data-i18n="csv.newline.mac"></option>
       </select>
    </div>
</script>


<script type="text/javascript">
    RED.nodes.registerType('csv',{
        category: 'parser',
        color:"#DEBD5C",
        defaults: {
            name: {value:""},
            spec: {value:"rfc"},
            sep: {
                value:',', required:true,
                label:RED._("node-red:csv.label.separator"),
                validate:RED.validators.regex(/^.{1,2}$/)},
            //quo: {value:'"',required:true},
            hdrin: {value:""},
            hdrout: {value:"none"},
            multi: {value:"one",required:true},
            ret: {value:'\\r\\n'}, // default to CRLF (RFC4180 Sec 2.1: "Each record is located on a separate line, delimited by a line break (CRLF)")
            temp: {value:""},
            skip: {value:"0"},
            strings: {value:true},
            include_empty_strings: {value:""},
            include_null_values: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "parser-csv.svg",
        label: function() {
            return this.name||"csv";
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        },
        oneditprepare: function() {
            if (this.hdrout === false) { this.hdrout = "none"; $("#node-input-hdrout").val("none"); }
            if (this.hdrout === true) { this.hdrout = "all"; $("#node-input-hdrout").val("all");}
            if (this.strings === undefined) { this.strings = true; $("#node-input-strings").prop('checked', true); }
            if (this.skip === undefined) { this.skip = 0; $("#node-input-skip").val("0");}
            $("#node-input-skip").spinner({ min:0 });
            if (this.sep == "," || this.sep == "\\t" || this.sep == ";" || this.sep == ":" || this.sep == " " || this.sep == "#") {
                $("#node-input-select-sep").val(this.sep);
                $("#node-input-sep").hide();
            } else {
                $("#node-input-select-sep").val("");
                $("#node-input-sep").val(this.sep);
                $("#node-input-sep").show();
            }
            $("#node-input-select-sep").on("change", function() {
                var v = $("#node-input-select-sep").val();
                $("#node-input-sep").val(v);
                if (v == "") {
                    $("#node-input-sep").val("");
                    $("#node-input-sep").show().focus();
                } else {
                    $("#node-input-sep").hide();
                }
            });

            $("#csv-option-spec").on("change", function() {
                if ($("#csv-option-spec").val() == "rfc") {
                    $(".form-tips.csv-lecacy-warning").hide();
                } else {
                    $(".form-tips.csv-lecacy-warning").show();
                }
            });
            // new nodes will have `spec` set to "rfc" (default), but existing nodes will either not have 
            // a spec value or it will be empty - we need to maintain the legacy behaviour for existing
            // flows but default to rfc for new nodes
            let spec = !this.spec ? "" : "rfc"
            $("#csv-option-spec").val(spec).trigger("change")
        },
        oneditsave: function() {
            const specFormVal = $("#csv-option-spec").val() || '' // empty === legacy
            const spectNodeVal = this.spec || ''  // empty === legacy, null/undefined means in-place node upgrade (keep as is)
            if (specFormVal !== spectNodeVal) {
                // only update the flow value if changed (avoid marking the node dirty unnecessarily)
                this.spec = specFormVal
            }
        }
    });
</script>
